<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// 执行上下文（执行环境）：某段代码的执行环境（包含代码执行时所用的数据）

// 浏览器解析到script时，JS引擎（解析器）开始工作：
// 1.首先创建全局执行上下文（预解析代码）
// Execution Context -> EC 执行上下文
    // 执行上下文中包含一个变量对象（Variable Object -> VO）
        // 在预解析代码时，主要去查找var function
        // 变量对象包含当前作用域中的变量、函数、参数等信息
    // 执行上下文中包含一个激活对象（Activation Object -> AO）
        // 函数执行时的变量对象叫激活对象
        // 在预解析代码时，主要去查找var function 参数、arguments等信息
    // 执行上下文中包含一个作用域链（Scope Chain -> SC）
    // 执行上下文中包含一个this对象（指向当前函数的调用对象）

// 伪代码：

/* global_EC = {// 全局执行上下文对象
    SC: [global_EC.VO],// 作用域链
    VO: {// 变量对象 -> window
        x: undefined,// -> 1
        fn: function (a,b){
            var y = 2;
            console.log( x+y );// 3
            console.log( a+b );// 7
            console.log( abc );// 报错
        }
    },
    this: window
}

// 2.逐行执行代码（执行过程中变量对象中的值随时改变）
x = 1;
fn(3,4);
    // 1.先预解析fn函数（创建fn的执行上下文）
    fn_EC = {// 局部执行上下文
        SC: [fn_EC.AO, global_EC.VO],// 作用域链
        AO: {// 激活对象
            a: 3,
            b: 4,
            y: undefined,// -> 2
            arguments: {
                0: 3,
                1: 4,
                length: 2
            }
        },
        this: window
    }
    // 2.逐行执行函数内部的代码
    y = 2;
    console.log( x+y );// 1+2=3
    console.log( a+b );// 3+4=7
    console.log( abc );// 报错 */


console.log( this );// window
console.log( x );// undefined
var x = 1;
function fn(a,b){
    console.log( this );// window
    var y = 2;
    console.log( x+y );// 3
    console.log( a+b );// 7
    console.log( abc );// 报错
}
fn(3,4);

</script>
</body>
</html>